<template>
<div class="search-a">


  <div class="one">
        <span>输入搜索</span>
       <el-input v-model="search" placeholder="输入用户昵称或手机号..." ></el-input>
  </div>
    <div class="two">
      <span>上次消费时间</span>
      <el-date-picker
      v-model="value1"
      type="date"
      placeholder="开始日期">
    </el-date-picker>
    <div class="heng"></div>
     <el-date-picker
      v-model="value2"
      type="date"
      placeholder="结束日期">
       </el-date-picker>
    </div>
    <div class="btn">
       <el-button type="primary" @click="searchFunBtn">查询</el-button>
       <el-button @click="chongzhi">重置</el-button>
       <el-button type="primary" @click="batchDelete">批量删除</el-button>

    </div>

</div>

</template>

<script>
import Bus from '../../../utils/Bus'
export default {

   data() {
      return {
          search: '',
         pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    },
    methods:{
      searchFunBtn(){
        this.$emit('searchParent',{search:this.search,value1:this.value1,value2:this.value2})
        console.log(this.search);
      },
      batchDelete(){
          Bus.$emit('batchDelete')
      },
      chongzhi(){
        this.$emit('chongzhi')
        this.search =''
      }
    }
}
</script>

<style lang="less">
.el-picker-panel{
 z-index: 2013;
    position: absolute;
    top: 253px;
    left: 608px;
}
.search-a{
    background: #fff;
    line-height: 64px;
    padding-left: 30px;
    .el-input{
        width: 170px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #333;
        padding-left:2px;
        display: inline-block;
        margin: 26px 0 30px 0;
       .el-input__inner{
           height: 32px;
       }

 
    }
    span{
         font-size: 16px;
         margin-right: 8px;
         font-weight: 600;
       }
       .one{
         display: inline-block;

       }
       .two{
         display: inline-block;
         margin-left: 20px;
         .el-input__prefix{
          display: none;
          .el-input__icon{
            display: none;
          }
            }
            .heng{
               width: 30px;
               height: .5px;
              display: inline-block;
              background: gray;
               margin-right: 14px;
               margin-left: 14px;
              padding-top: 4px;
              border-radius: 10px;
            }
       }
       .btn{
         display: inline-block;
         margin-left: 40px;
         .el-button{
           margin-right: 20px;
         }
       }
}

</style>
   
